<template>
	<view class="content">
		<view class="top_box">
			<view class="top_search"><u-search placeholder="请输入关键字搜索" bgColor="#FFFFFF" v-model="keyword" shape="round"
					height="70rpx" color="#999999" :showAction="false"></u-search></view>
			<view class="top_logo">
				<u-swiper :list="listSwiper" keyName="img" height="264rpx" radius="30rpx" autoplay circular></u-swiper>
			</view>
		</view>
		<view class="good_logo_box">
			<u-grid :border="false" col="3">
				<u-grid-item v-for="(item, i) in logoList" :key="i">
					<view class="logo-item">
						<view class="img-box">
							<u--image :showLoading="true" :src="item.img" width="38rpx" height="38rpx"></u--image>
						</view>
						<view class="name">{{item.name}}</view>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
		<u-scroll-list :indicator="false">
			<view class="middle_show" style="padding: 40rpx 30rpx 30rpx;">
				<view v-for="(item, i) in productCenterIconList" :key="i" @tap="toNavShop(item)"
					style="display: flex;flex-direction: column;align-items: center;margin-right: 30rpx;">
					<view class="icon-box">
						<u--image :src="item.img" width="88rpx" height="88rpx"></u--image>
					</view>
					<view class="icon-name">{{item.name || ''}}</view>
				</view>
			</view>
		</u-scroll-list>
		

		<view class="popular_box">
			<view class="popular">
				<view class="porpular_tip">
					<view class="popular_product">爆款商品</view>
					<view class="popular_limted">限时抢租</view>
				</view>
				<view class="more_tip" @tap="toNavShop(hotItem)">
					<view class="more_product">更多商品</view>
					<u-icon name="arrow-right" color="#FFFFFF" size="18rpx"></u-icon>
				</view>
			</view>
			<view class="product_box">
				<view class="left_imgBox" style="position: relative;" v-if="hotFirstDetail" @tap="toShopDetail(hotFirstDetail.id)">
					<view style="position: absolute;top: 0;z-index: 19;">
						<view class="product_name">{{hotFirstDetail.name || ''}}测试测试测试测试测试测试测试</view>
						<view class="product_coming">闪亮登场</view>
					</view>
					<view style="width: 100%;height: 100%;">
						<u--image :src="hotFirstDetail.img" width="300rpx" height="360rpx"></u--image>
					</view>
				</view>
				<view class="right_imgBox">
					<view class="right_imgTop" style="position: relative;" @tap="toShopDetail(hotSecondDetail.id)">
						<view style="position: absolute;top: 21rpx;z-index: 19;left: 25rpx;">
							<view class="productName">{{hotSecondDetail.name || ''}}</view>
							<view class="productComing">畅销商品</view>
							<view class="top_button">正品保障</view>
						</view>
						<view class="">
							<u--image :src="hotSecondDetail.img" width="370rpx" height="170rpx"></u--image>
						</view>
					</view>
					<view class="right_imgBottom" style="position: relative;" @tap="toShopDetail(hotThirdDetail.id)">
						<view style="position: absolute;top: 21rpx;z-index: 19;left: 25rpx;">
							<view class="productName">{{hotThirdDetail.name || ''}}</view>
							<view class="productComing">价格透明·限时优惠</view>
							<view class="bottom_button">正品保障</view>
						</view>
						<view class="">
							<u--image :src="hotThirdDetail.img" width="370rpx" height="170rpx"></u--image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="used_box">
			<view class="bg-used">
				<u--image src="/static/ming-pop/used.png" width="720rpx" height="413rpx"></u--image>
			</view>
			<view class="icon"><u-icon name="arrow-right" color="#FFFFFF" size="18rpx"></u-icon></view>
			<view class="used_product">
				<u-scroll-list :indicator="false">
					<view class="used-list">
						<view class="used-item" v-for="(item, i) in secondList" :key="item.id" @tap="toShopDetail(item.id)">
							<view class="img-box">
								<u--image radius="10rpx" :src="item.img" width="130rpx" height="163rpx"></u--image>
							</view>
							<view class="used_name">{{item.name || ''}}</view>
							<view class="used_money">￥{{item.price || '0'}}/{{item.day || '1'}}天</view>
						</view>
					</view>
				</u-scroll-list>
			</view>
		</view>
		
		
		<scroll-view scroll-x="true" style="white-space: nowrap;padding: 60rpx 30rpx 40rpx;">
			<view class="productTab">
				<view :class="['tab-item', current == i ? 'current' : '']" v-for="(item, i) in productCenterIconList" :key="item.id"
					@click="clickTab(item, i)">
					{{item.name || ''}}
				</view>
				<!-- <u-tabs :list="productTypeList" scrollable lineWidth="50rpx" @click="clickTab" lineColor="#f59f3d"
					:activeStyle="{color: '#303133',fontWeight: 'bold',transform: 'scale(1.05)'}"
					:inactiveStyle="{color: '#606266',transform: 'scale(1)'}" :current="current"></u-tabs> -->
			</view>
		</scroll-view>
		<!-- class="tab-Two" -->
		<view>
			<!-- <shop :list="shopList"></shop> -->
			<uv-waterfall ref="waterfall" v-model="shopList" left-gap="10" right-gap="10" column-gap="8"
				@changeList="changeList">
				<!-- 第一列数据 -->
				<template v-slot:list1>
					<!-- 为了磨平部分平台的BUG，必须套一层view -->
					<view>
						<view v-for="(item, index) in list1" :key="item.id" class="waterfall-item"
							@tap="toShopDetail(item.id)">
							<view class="shop-item">
								<uv-image radius="20rpx" :src="item.img" width="340rpx" mode="widthFix"></uv-image>
								<view class="shop-content">
									<view class="shop-title">{{item.name || ''}}</view>
									<view class="price-box">
										￥{{item.price || '0'}}/{{item.day || '1'}}天
									</view>
								<!-- 	<view class="amount-box">
										<view class="">已售:2012</view>
										<view class="">库存:1.4W</view>
									</view> -->
								</view>
							</view>
						</view>
					</view>
				</template>
				<!-- 第二列数据 -->
				<template v-slot:list2>
					<!-- 为了磨平部分平台的BUG，必须套一层view -->
					<view>
						<view v-for="(item, index) in list2" :key="item.id" class="waterfall-item"
							@tap="toShopDetail(item.id)">
							<view class="shop-item">
								<uv-image :src="item.img" radius="20rpx" width="340rpx" mode="widthFix"></uv-image>
								<view class="shop-content">
									<view class="shop-title">{{item.name || ''}}</view>
									<view class="price-box">
										￥{{item.price || '0'}}/{{item.day || '1'}}天
									</view>
									<!-- <view class="amount-box">
										<view class="">已售:2012</view>
										<view class="">库存:1.4W</view>
									</view> -->
								</view>
							</view>
						</view>
					</view>
				</template>
			</uv-waterfall>
		</view>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hotItem: {},
				hotFirstDetail: {},
				hotSecondDetail: {},
				hotThirdDetail: {},
				// 轮播图
				listSwiper: [],
				logoList: [{
						img: require('@/static/ming-pop/credit.png'),
						name: '信用免押',
					},
					{
						img: require('@/static/ming-pop/ensure.png'),
						name: '正品保障',
					},
					{
						img: require('@/static/ming-pop/service.png'),
						name: '平台服务',
					}
				],
				productCenterIconList: [],
				usedProductList: [{
						img: require('@/static/原img/shop.png'),
						name: '99新 iPhone',
						money: '￥18.9/天'
					},
					{
						img: require('@/static/原img/shop.png'),
						name: '99新 iPhone',
						money: '￥18.9/天'
					},
					{
						img: require('@/static/原img/shop.png'),
						name: '99新 iPhoneawdfFf',
						money: '￥18.9/天'
					},
					{
						img: require('@/static/原img/shop.png'),
						name: '99新 iPhone',
						money: '￥18.9/天'
					}
				],
				current: 0,
				productTypeList: [{
					name: '全部'
				}, {
					name: '视频',
				}, {
					name: '音频',
				}, {
					name: '图文',
				}],
				shopQuery: {
					cat_id: '',
					num: 10,
					page: 1
				},
				shopList: [],
				status: 'loadmore',
				total: 0,
				list1: [], // 瀑布流第一列数据
				list2: [], // 瀑布流第二列数据
				secondList: [], // 二手严选
			}
		},
		onLoad() {
			this.initbanner()
			
		},
		onPullDownRefresh() {
			this.shopList = [];
			this.$refs.waterfall.clear();
			this.list1 = [];
			this.list2 = [];
			this.shopQuery.page = 1
			this.initbanner()
			this.getShoplist(() => uni.stopPullDownRefresh())
		},
		onReachBottom() {
			if (this.shopQuery.page * this.shopQuery.num >= this.total) return
			if (this.status == 'loading') return
			this.shopQuery.page++
			this.getShoplist()
		},
		methods: {
			// 这点非常重要：e.name在这里返回是list1或list2，要手动将数据追加到相应列
			changeList(e) {
				this[e.name].push(e.value);
			},
			async initbanner() {
				const res = await this.$request('Index/IndexList', {})
				console.log('请求数据', res);
				this.listSwiper = res.photo
				this.productCenterIconList = res.cats
				try{
					this.shopQuery.cat_id = res.cats[0].id
				}catch(e){
					//TODO handle the exception
				}
				this.getShoplist()
				const index = res.cats.findIndex(item => item.name == '二手严选')
				const hotIndex = res.cats.findIndex(item => item.name == '爆款商品')
				if (index != -1) {
					this.getSecondList(res.cats[index].id)
				}
				if (hotIndex != -1) {
					this.hotItem = res.cats[hotIndex]
					this.getHotList(this.hotItem.id)
				}
			},
			async getShoplist(cb) {
				this.status = 'loading'
				// const res = await this.$request("Index/GoodsList", {
				// 	data: this.shopQuery,
				// 	isLoad: false
				// })
				const res = await this.$request("Index/SeachGoods", {
					data: this.shopQuery,
					isLoad: false
				})
				cb && cb()
				this.shopList = res.result
				this.status = 'nomore'
				// this.total = res.count || 0
				// if (this.total > this.shopList.length) {
				// 	this.status = 'loadmore'
				// } else {
				// 	this.status = 'nomore'
				// }
			},
			// 获取二手严选商品
			async getSecondList(cat_id) {
				const res = await this.$request("Index/SeachGoods", {
					data: {
						cat_id
					},
					isLoad: true
				})
				this.secondList = res.result
			},
			async getHotList(cat_id) {
				const res = await this.$request("Index/SeachGoods", {
					data: {
						cat_id
					},
					isLoad: true
				})
				res.result.forEach((item, i) => {
					if (i == 0) {
						this.hotFirstDetail = item
					}
					else if (i == 1) {
						this.hotSecondDetail = item
					}
					else if (i == 2) {
						this.hotThirdDetail = item
					} else {
						return
					}
				})
			},
			toNavShop(item) {
				uni.navigateTo({
					url: '/pages/navShop/navShop?data=' + JSON.stringify(item)
				})
			},
			toShopDetail(id) {
				uni.navigateTo({
					url: '/pages/productDetails/productDetails?data=' + id
				})
			},
			clickTab(item, i) {
				this.current = i
				this.shopList = [];
				this.$refs.waterfall.clear();
				this.list1 = [];
				this.list2 = [];
				this.shopQuery.cat_id = item.id
				this.getShoplist()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		background: #FFFFFF;
		padding-bottom: 80rpx;
	}

	.top_box {
		width: 100%;
		height: 375rpx;
		padding: 22rpx 30rpx;
		background: linear-gradient(180deg, #F0960F 0%, rgba(240, 150, 15, 0) 100%);

		.top_search {
			width: 690rpx;
			height: 70rpx;
		}

		.top_logo {
			margin-top: 40rpx;
			width: 690rpx;
			height: 264rpx;
			border-radius: 30rpx;

		}
	}

	.good_logo_box {
		margin-top: 43rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 0 30rpx;

		// .logo_box {
		// 	width: 210rpx;
		// 	height: 60rpx;
		// 	background: #F9F9F8;
		// 	border-radius: 30rpx;
		// 	padding: 11rpx 38rpx;
		// 	// 
		// 	display: flex;
		// 	align-items: center;
		// 	justify-content: center;
		// 	.good_logo {
		// 		margin-left: 10rpx;
		// 		font-size: 22rpx;
		// 		font-weight: bold;
		// 		color: #1152D2;
		// 	}
		// }
		.logo-item {
			width: 220rpx;
			height: 60rpx;
			background: #F9F9F8;
			border-radius: 30rpx;
			padding: 5rpx 30rpx;

			display: flex;
			align-items: center;
			justify-content: center;

			.name {
				margin-left: 10rpx;
				font-size: 22rpx;
				font-weight: bold;
				color: #1152D2;
			}
		}
	}

	.middle_show {
		// margin-top: 40rpx;
		// padding: 0 30rpx;
		display: flex;
		align-items: center;
		.icon-list {
			// margin-top: 42rpx;
			display: flex;
			align-items: center;
			// padding-left: 17rpx;

			.icon-item {
				// @include flex-center();
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-right: 45rpx;


			}
		}
	}

	.icon-box {
		width: 88rpx;
		height: 88rpx;
	}

	.icon-name {
		margin-top: 12rpx;
		font-size: 24rpx;
		color: #222222;
	}

	.popular_box {
		width: 100%;
		height: 380rpx;
		background: linear-gradient(180deg, #F19B1A 0%, rgba(243, 172, 65, 0) 100%);
		padding: 20rpx 30rpx;
		border-radius: 20rpx;

		.popular {
			display: flex;
			// align-items: end;
			justify-content: space-between;

			.porpular_tip {
				display: flex;
				align-items: end;

				.popular_product {
					font-size: 38rpx;
					font-weight: bold;
					color: #FFFFFF;
					margin-right: 20rpx;
				}

				.popular_limted {

					font-size: 24rpx;
					font-weight: 500;
					color: #FFFFFF;
				}
			}

			.more_tip {
				display: flex;
				align-items: center;

				.more_product {
					margin-right: 10rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}

		.product_box {
			margin-top: 32rpx;
			display: flex;
			align-items: center;

			.left_imgBox {
				margin-right: 20rpx;

				// background: url('~@/static/原img/iPhone4.png') no-repeat;
				// background-size: 100% 100%;
				background: linear-gradient(180deg, #FFFCF1 0%, #F9BF00 100%);
				width: 300rpx;
				height: 360rpx;
				// padding: 26rpx 33rpx;
				border-radius: 30rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				// justify-content: center;
				.product_name {
					margin-top: 26rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
					margin-bottom: 12rpx;
					width: 250rpx;
					@include over-ellip();
				}

				.product_coming {
					font-size: 24rpx;
					font-weight: 500;
					color: #333333;
				}
			}

			.right_imgTop {
				margin-bottom: 20rpx;
				width: 370rpx;
				height: 170rpx;
				border-radius: 30rpx;
				// background: url('~@/static/原img/right_iPhone.png') no-repeat;
				// background-size: 100% 100%;
				background: linear-gradient(180deg, rgba(134,165,228,7.17) 0%, #8A9BE8 100%);
				// padding: 22rpx 25rpx;

				.productName {
					// margin-top: 26rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
					margin-bottom: 12rpx;
				}

				.productComing {
					// margin-top: 5rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #333333;
					margin-bottom: 12rpx;
				}

				.top_button {
					margin-top: 5rpx;
					width: 124rpx;
					height: 31rpx;
					background: linear-gradient(180deg, rgba(134, 165, 228, 0.49) 0%, #8A9BE8 100%);
					border-radius: 30rpx;
					text-align: center;
					font-size: 22rpx;
					color: #32438D;
				}
			}

			.right_imgBottom {
				width: 370rpx;
				height: 170rpx;
				border-radius: 30rpx;
				// background: url('~@/static/原img/watch.png') no-repeat;
				// background-size: 100% 100%;
				background: linear-gradient(180deg, rgba(160,220,76,0.21) 0%, #A6DC6B 100%);
				// padding: 22rpx 25rpx;

				.productName {
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
					margin-bottom: 12rpx;
				}

				.productComing {
					// margin-top: 5rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #333333;
					margin-bottom: 12rpx;
				}

				.bottom_button {
					margin-top: 5rpx;
					width: 124rpx;
					height: 31rpx;
					background: linear-gradient(180deg, #B5E280 0%, rgba(108, 158, 50, 0.4) 100%);
					border-radius: 30rpx;
					text-align: center;
					font-size: 22rpx;
					color: #578424;
				}
			}
		}
	}


	.used_box {
		margin: 100rpx 15rpx 0;
		width: 720rpx;
		height: 413rpx;
		border-radius: 30rpx;
		// background: url('~@/static/原img/used.png') no-repeat;
		// background-size: 100% 100%;
		position: relative;
		padding: 0 9rpx;
		.bg-used {
			position: absolute;
			left: 0;
			top: 0;
		}

		.icon {
			position: absolute;
			top: 41rpx;
			right: 15rpx;
		}

		.used_product {
			position: absolute;
			top: 88rpx;
			z-index: 99;
			width: 702rpx;
			// height: 317rpx;
			background: #FFFFFF;
			border-radius: 30rpx;

			// margin-top: 29rpx;
			padding: 37rpx 18rpx 20rpx;
			.used-list {
				display: flex;
				align-items: center;
			}

			.used-item {
				min-width: 157rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 20rpx;

				.used_name {
					font-size: 23rpx;
					color: #222222;
					width: 150rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-top: 8rpx;
					text-align: center;
				}

				.used_money {
					margin-top: 14rpx;
					font-size: 24rpx;
					font-weight: bold;
					color: #CE1C1C;
				}
			}
		}
	}

	.tab-Two {
		padding: 20rpx 32rpx;
		/* #ifdef H5 */
		padding-bottom: 150rpx;
		/* #endif */
	}

	.shop-item {
		width: 340rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 20rpx 1rpx rgba(170, 170, 170, 0.16);
		border-radius: 20rpx;
		margin-bottom: 16rpx;

		.shop-content {
			padding: 17rpx 16rpx;
		}

		.shop-title {
			color: #222222;
			font-size: 30rpx;
			@include more-over-ellip(2);
		}

		.price-box {
			margin-top: 10rpx;
			font-size: 30rpx;
			color: #CE1C1C;
		}

		.amount-box {
			margin-top: 10rpx;
			@include flex-between(100);
			font-size: 26rpx;
			color: #999999;
		}
	}

	.productTab {
		display: flex;
		align-items: center;

		.tab-item {
			font-size: 30rpx;
			color: #222222;
			margin-right: 60rpx;
		}

		.current {
			position: relative;
			font-size: 36rpx;
			font-weight: bold;

			&::after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				z-index: 1;
				width: 72rpx;
				height: 18rpx;
				background: url('~@/static/ming-pop/icon1.png') no-repeat;
				background-size: 100% 100%;
			}
		}
	}
</style>